<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="cjw">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>测试MyCss样式效果</title>
  <link type="text/css" rel="stylesheet" href="MyCss.css"/>
  <style>
	*{margin: 0; padding: 0;}
	body {    
		background: #494A5F;
		color: #D5D6E2;
		font-weight: 500;
		font-size: 1.05em;
		font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
	}
	.rowli li:after {content: "|"; color: #ccc; margin-left: 12px;}
	.table-style1 {margin: 20px;}
	.table-style1 td {text-align: center;}
	.container {height: 300px;}
  </style>
 </head>
 <body>
	<div class="container cle-f box-border-style1">
		<ul class="nav nav-pills">
			<li class="active">
				<a class="ripple">Home</a>
			</li>
			<li>
				<a class="ripple">Profile</a>
			</li>
			<li>
				<a class="ripple">Messages</a>
			</li>
		</ul>
	</div>
	<ul class="rowli">
		<li>主页</li>
		<li>主页</li>
		<li>主页</li>
	</ul>
	<table class="table-style1">
		<tr>
			<th>主页</th>
			<th>主页</th>
		</tr>
		<tr class="tr-odd">
			<td>content</td>
			<td>content</td>
		</tr>
		<tr>
			<td>主页</td>
			<td>主页</td>
		</tr>
		<tr class="tr-odd">
			<td>主页</td>
			<td>主页</td>
		</tr>
	</table>
	<p class="text-break-style1" style="margin-left: 12px; font-size: 14px;"> 
		如果在胜利前却步，<br>
往往只会拥抱失败；<br>
如果在困难时坚持，<br>
常常会获得新的成功。
	</p>
	<h1 class="title-font-style2">coco</h1>
	<span class="text-font-style1" style="margin-left: 12px; font-size: 14px;">123456</span>
	<div class="box-border-style2"></div>
	<h1>coco</h1>
	/*
	btn 初始设置
	btn-success 颜色设置（字体颜色、背景颜色、边框颜色）
	btn-lg 边距、格式设置（大小、行高、内边距、是否圆角）
	ripple 动画（此处是波浪形动画）
	*/
	<a class="btn btn-success btn-lg ripple">button</a>
	<script>
	</script>
 </body>
</html>